/*
 * @Author: xiaosihan 
 * @Date: 2023-08-21 22:46:28 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-07-06 15:26:21
 */




import { Tooltip } from "antd";
import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect } from "react";
import alignSVG from "./align.svg?raw";
import styles from "./alignTools.module.less";
import ailgnIconPNG from "./ailgnIcon.png";
import designEditor from "@/editorComponent/designEditor";

interface Iprops {
}

// 对齐工具
export default function AlignTools() {
    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {

    }), []);

    return (
        <Tooltip
            // title={<img alt="" src={alignSVG} />}
            title={
                <div className={styles.ailgn} >
                    <div className={styles.title} >对齐工具</div>

                    <div className={styles.ailngBtns} >
                        <img alt="" src={ailgnIconPNG} className={styles.ailgnIcon} />
                        <div id="leftTop" onClick={() => designEditor.setObjectAilgn("leftTop")} className={styles.ailngBtn}></div>
                        <div id="top" onClick={() => designEditor.setObjectAilgn("top")} className={styles.ailngBtn}></div>
                        <div id="rightTop" onClick={() => designEditor.setObjectAilgn("rightTop")} className={styles.ailngBtn}></div>
                        <div id="left" onClick={() => designEditor.setObjectAilgn("left")} className={styles.ailngBtn}></div>
                        <div id="center" onClick={() => designEditor.setObjectAilgn("center")} className={styles.ailngBtn}></div>
                        <div id="right" onClick={() => designEditor.setObjectAilgn("right")} className={styles.ailngBtn}></div>
                        <div id="leftBottom" onClick={() => designEditor.setObjectAilgn("leftBottom")} className={styles.ailngBtn}></div>
                        <div id="bottom" onClick={() => designEditor.setObjectAilgn("bottom")} className={styles.ailngBtn}></div>
                        <div id="rightbottom" onClick={() => designEditor.setObjectAilgn("rightbottom")} className={styles.ailngBtn}></div>
                    </div>

                </div>
            }
            overlayInnerStyle={{ width: 116 }}
            color="#ffffff"
            placement="bottom"
        // mouseLeaveDelay={0}
        // mouseEnterDelay={0.5}
        >
            <span
                className={clsx(styles.alignTools)}
                dangerouslySetInnerHTML={{ __html: alignSVG }}
            >

            </span>
        </Tooltip>
    );

}